﻿

        $(document).ready(function () {

            //Speed of the slideshow
            var speed = 4000;

            //You have to specify width and height in #slider CSS properties
            //After that, the following script will set the width and height accordingly
            $('#mask-gallery, #gallery li').width($('#slider').width());
            $('#gallery').width($('#slider').width() * $('#gallery li').length);
            $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

            //Assign a timer, so it will run periodically
            var run = setInterval('newsscoller(0)', speed);

            $('#gallery li:first, #excerpt li:first').addClass('selected');

            //Pause the slidershow with clearInterval
            $('#btn-pause').click(function () {
                clearInterval(run);
                return false;
            });

            //Continue the slideshow with setInterval
            $('#btn-play').click(function () {
                run = setInterval('newsscoller(0)', speed);
                return false;
            });

            //Next Slide by calling the function
            $('#btn-next').click(function () {
                newsscoller(0);
                return false;
            });

            //Previous slide by passing prev=1
            $('#btn-prev').click(function () {
                newsscoller(1);
                return false;
            });

            //Mouse over, pause it, on mouse out, resume the slider show
            $('#slider').hover(
		        function () {
		            clearInterval(run);
		        },
		        function () {
		            run = setInterval('newsscoller(0)', speed);
		        }
	        );
        });


        function newsscoller(prev) {

            //Get the current selected item (with selected class), if none was found, get the first item
            var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
            var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

            //if prev is set to 1 (previous item)
            if (prev) {

                //Get previous sibling
                var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
                var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

                //if prev is set to 0 (next item)
            } else {

                //Get next sibling
                var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
                var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
            }

            //clear the selected class
            $('#excerpt li, #gallery li').removeClass('selected');

            //reassign the selected class to current items
            next_image.addClass('selected');
            next_excerpt.addClass('selected');

            //Scroll the items
            $('#mask-gallery').scrollTo(next_image, 800);
            $('#mask-excerpt').scrollTo(next_excerpt, 800);

        }